<template>
 <div class="wrapper">
 <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgurl">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>
<script>
export default {
   name:'HomeSwiper',
   data:function(){
       return {
           swiperOption:{
               pagination:'.swiper-pagination',
               loop:true
           },
           swiperList:[
               {
               id:'0001',
               imgurl:"http://img1.qunarzz.com/piao/fusion/1811/29/2a6b77b6ff72402.jpg_750x200_d4cec568.jpg"
               },
               {
                   id:'0002',
                   imgurl:"http://img1.qunarzz.com/piao/fusion/1806/e5/fc2bfc8bfcccd402.jpg_750x200_1218ab5f.jpg"
               }
           ]
       }
   }
}
 
</script>
     
<style scoped>
 .wrapper >>> .swiper-pagination-bullet-active{
     background-color: white !important
 }
  .swiper-img{
      width: 100%;
  }
  .wrapper{
      overflow: hidden;
      width: 100%;
      height: 0;
      padding-bottom: 31.25%;
  }
</style>
